<!--毕业条件设置-->
<template>
  <div class="wrapper-container">
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" >
        <el-table-column prop="trainingLevelShow" label="培养层次" align="center"></el-table-column>
        <el-table-column prop="researchOffice" label="毕业条件" align="center" width="1000">
          <template slot-scope="scope">
            <div class="settingList"  v-if="scope.row.conditionsTypeVOList.length>0">
              <h3>满足以下任意一个条件的学时不能毕业：</h3>
              <p v-for="(item,index) in scope.row.conditionsTypeVOList" :key="index">{{index+1}}.{{item.conditionName}}</p>
            </div>
            <div v-else>无</div>
          </template>
      </el-table-column>
        <el-table-column prop="classNames" label="毕业班列表" align="center" width="280"></el-table-column>
        <el-table-column prop="courseNumber" label="设置" align="center"  width="200">
          <span class="small-btn primary" slot-scope="scope" @click="setting(scope.row)">
            <img src="../../../assets/assessment/icon-set.png"> 设置
          </span>
        </el-table-column>
      </el-table>
    </div>
    <!-- 设置弹窗 -->
    <el-dialog title="毕业条件设置" :visible.sync="dialogVisible" width="1262px" :close-on-click-modal="false">
      <div class="setting table-container" style="margin-top:7px">
        <h1 class="setting-title">任职毕业审核（不通过条件）设置</h1>
        <el-table ref="multipleTable" :data="settingData" border  style="width: 100%" class="table-data" @selection-change="handleSelectionChange" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column prop="conditionName" label="不通过条件" align="center"> </el-table-column>
        </el-table>
        <h2 class="setting-title1">注：满足以上任意一个条件的学员不能毕业</h2>
        <div class="btnGroup">
          <span class="small-btn edit-yellow" @click='confirmBtn'>保存</span>
          <span class="small-btn delete-red" @click='dialogVisible = false'>取消</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getSettingList,getSettingCheck,getSettingSave} from "@/api/student";

export default {
  data() {
    return {
      dialogVisible:false,
      settingData:[],
      tableData: [],
      trainingLevelId:'',//培养层次
    };
  },
  mounted(){
    this.initList()
  },
  methods: {
    async initList(){
      let res = await getSettingList();
      if(res.code == 200){
        this.tableData = res.data;
      }
    },
    //设置
    async setting(row){
      this.dialogVisible = true;
      this.IDS = []
      this.trainingLevelId = row.trainingLevelId;
      let res = await getSettingCheck();
      if(res.code == 200){
        this.settingData = res.data;
        this.$nextTick(()=>{
          this.$refs.multipleTable.clearSelection();
          if(row.conditionsTypeVOList.length>0){
            for(let m = 0;m<this.settingData.length;m++){
              for(let k = 0;k<row.conditionsTypeVOList.length;k++){
                if(this.settingData[m].conditionCode == row.conditionsTypeVOList[k].conditionCode){
                  this.$refs.multipleTable.toggleRowSelection(this.settingData[m]);
                }
              }
            }
          }
        })
      }
    },
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.conditionCode);
    },
    async confirmBtn(){
      let params = {
        conditionCodes:this.IDS,
        trainingLevelId:this.trainingLevelId
      }
      let res = await getSettingSave(params);
      if(res.code == 200){
        this.$message.success('设置成功！');
        this.dialogVisible = false;
        this.initList()
      }
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;

  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.settingList{
    padding: 20px 0 20px 20px;
    font-size: 14px;
    h3{margin-bottom: 14px;font-size: 14px;}
    p{margin-left: 65px}
  }
.primary{
    color: #51AEF6 ;
    background: #F1F8FE ;
    border: 1px solid #51AEF6 ;
  }
// 设置窗口
.setting{
  padding:7px 186px 110px;
  .setting-title{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #004CA7;
    margin-bottom: 17px;
    text-align: center;
  }
  .setting-title1{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #FF3819;
    margin: 16px 0 88px 0;
  }
  
  .edit-yellow{
    color: #F3B815;
    background: #FFF6EF;
    border: 1px solid #F3B815;
    width: 60px;
  }
  .delete-red{
    color: #FA5339;
    background: #FFEFEF;
    border: 1px solid #FA5339;
    width: 60px;
  }
  .btnGroup{
    display: flex;
      justify-content: center;
      margin-top: 29px;
    .small-btn:nth-child(1){
        margin-right: 124px;
    }
  }
  
  .inline{
    display: flex;
    align-items: center;
    margin-left: 44px;
    .el-input{width: 205px;margin-left: 8px;}
  }
  .inline1{
    text-align: left;
    margin-left: 44px;
  }
}
</style>
